<template>
<div style="height: 100%">
   <scroll ref="scroll" style="overflow: hidden; height: 100%;"
      @scroll="scroll" :listenScroll="true" :probe-type="3"
      :data="list"
      :scrollbar="false"
      :pullDownRefresh="pullDownRefresh"
      :pullUpLoad="pullUpLoad"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp"
      @scrollStart="scrollStart"
      @scrollEnd="scrollEnd">
    <div class="list">
      <slot name="head"></slot>
      <dynamic-item v-for="(item, index) in list" :key="index"
        @clickImgItem="clickImg"
        :user="item.user"
        :dynamic="item.dynamic"
        :product="item.product"
        :other="item.other"
        @toShare="toShare"
        :myId="myId"
        style="margin-bottom: 12px;"></dynamic-item>
      <not-data v-show="showNotData" :tip="tip" @handleClick="refresh"></not-data>
      <div :style="{height: bottom + 'px'}"></div>
    </div>
  </scroll>

  <div v-transfer-dom>
    <previewer :list="selectAtlas" :options="options" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
  </div>

  <share
    v-model="showShare"
    :title="shareContent.title"
    :desc="shareContent.desc"
    :thumbUrl="shareContent.thumbUrl"
    :linkUrl="shareContent.linkUrl"></share>
</div>
</template>

<script>
import dynamicItem from '@/pages/meiTu/dynamicList/dynamicItem'
import notData from '@/components/not-data/not-data'
import Scroll from '@/components/scroll/scroll'
import Previewer from '@/components/previewer/previewer'
import { TransferDom, Popup } from 'vux'
import Share from '@/components/share/share'
import { handleBackMixin } from '@/assets/js/mixin'

import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'

export default {
  mixins: [handleBackMixin],
  props: {
    list: {
      type: Array,
      default: []
    },
    pullUpLoad: {
      type: Boolean,
      default: true
    },
    pullDownRefresh: {
      type: Boolean,
      default: true
    },
    tip: {
      type: String,
      default: '空空如也~<br>点击刷新'
    }
  },
  data () {
    return {
      options: {
        loop: false
      },
      showShare: false,
      showNotData: true,
      shareContent: {},
      selectAtlas: [],
      allPopupModels: ['showShare']
    }
  },
  created() {
    this.bottom = 0
    if (isIphoneX()) {
      this.bottom = 34
    }
    this.myId = localUser.get('id')
  },
  activated () {
    this.myId = localUser.get('id')
  },
  directives: {
    TransferDom
  },
  components: {
    Previewer, dynamicItem, Scroll, Popup, Share, notData
  },
  methods: {
    scrollStart () {
      const ele = document.getElementsByClassName('bottom-tab')
      if (ele[0]) {
        ele[0].style.transform = 'translateZ(105px)'
      }
    },
    scrollEnd (position) {
      const ele = document.getElementsByClassName('bottom-tab')
      if (ele[0]) {
        ele[0].style.transform = 'translateZ(0px)'
      }
    },
    scroll (position, directionY) {
      this.$emit('scroll', position, directionY)
    },
    onPullingUp () {
      this.$emit('onPullingUp')
    },
    onPullingDown () {
      this.$emit('onPullingDown')
    },
    refresh () {
      this.$emit('refresh')
    },
    clickImg (imgs, index) {
      // 预览图片
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    toShare (obj) {
      this.showShare = true
      this.shareContent = obj
    },
    toggleShare (value) {
      this.showShare = value
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    handleNativeBack () {
      if (this.showShare) {
        this.showShare = false
        return true
      }
      if (this.selectAtlas.length > 0) {
        this.$refs.previewer.close()
        this.selectAtlas = []
        return true
      }
      return false
    }
  },
  watch: {
    list () {
      if (this.list.length === 0) {
        this.showNotData = true
      } else {
        this.showNotData = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>


